<template xmlns='http://www.w3.org/1999/html'>
  <a-modal
    :title='"上帐"'
    width='60%'
    :visible='visible'
    :confirmLoading='confirmLoading'
    switchFullscreen
    @cancel='handleCancel'
    @ok='handleOk'
    cancelText='关闭'
    style='height: 100%;overflow: auto;padding-bottom: 53px;'>
    <template slot='footer'>
      <a-button @click='handleCancel'>取消</a-button>
      <a-button @click='handleOk' type='primary' :loading='confirmLoading' v-if='!disableSubmit'>确认</a-button>
<!--      <a-button @click='handleOk1' type='primary' :loading='confirmLoading' v-if='statusCotrall'>确认</a-button>-->
    </template>
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-row :gutter='24' style='border-bottom: 1px solid #e5e5e5'>
          <!--客户-->
          <a-col :md='12' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='客户编码'
            >
              <a-input   @click="custSearch('custName')" :disabled='true' placeholder='请选择客户' v-decorator="['custCode']" />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='客户名称'
            >
              <a-input-search :disabled='buttonTypes' placeholder='请选择客户'
                              @click="custSearch('custName')"
                              v-decorator="['custName',validatorRules.productCode]"
                              readOnly enter-button @search="custSearch('custName')" />
              <a-input v-decorator="['custCode']" placeholder='请选择负责人' type='hidden' />
            </a-form-item>
          </a-col>
          <!--          层级-->
          <a-col :md='12' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='商品层级'
            >
              <j-tree-select
                v-decorator="['productHierarchyCode']"
                placeholder='请选择商品层级'
                ref='productLevelCode'
                :disabled='buttonTypes'
                data-type='product_type'
                @change='(e,v)=>changeJselect(e,v)'
              />
              <a-input type='hidden' v-decorator="['productHierarchyName']"></a-input>
            </a-form-item>
          </a-col>
          <!--          商品-->
          <a-col :md='12' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='商品'>
              <a-input-search :disabled='buttonTypes' placeholder='请选择商品'
                              @click="custSearch('products')"
                              v-decorator="['productName',validatorRules.productCode]"
                              readOnly enter-button @search="custSearch('products')" />
              <a-input type='hidden' v-decorator="['productCode']" />
            </a-form-item>
          </a-col>
          <!--          组织-->
          <a-col :md='12' :sm='24' v-if='buttonType'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='部门'
            >
              <j-tree-select
                ref='selectRef'
                placeholder='选择部门'
                v-decorator="['actOrgCode', validatorRules.orgCode]"
                @change='orgCodeCh'
                data-type='org'
                :disabled='buttonTypes'
              />
              <a-input type='hidden' v-decorator="['actOrgName']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='费用池类型'>
              <cn-dict-select-tag
                :options="{ value: 'dictDataCode', label: 'dictDataDesc' }"
                dictCode='fee_manage_type'
                :triggerChange='true'
                :disabled='disableSubmit'
                v-decorator="['feeManageType',validatorRules.feeManageType]"
                placeholder='请选择'
              />
              <a-input type='hidden' v-decorator="['feeManageType']"></a-input>
            </a-form-item>
          </a-col>
          <!--          操作类型-->
          <a-col :md='12' :sm='24' v-if='!statusCotrall'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='操作类型'>
              <cn-dict-select-tag
                :options="{ value: 'dictDataCode', label: 'dictDataDesc' }"
                v-decorator="['payType', {initialValue:1,...validatorRules.promotionType}]"
                :triggerChange='true'
                dictCode='caozuo_type'
                placeholder='请选择'
                :disabled='buttonType'
              />
            </a-form-item>
          </a-col>
          <!--          操作-->
          <a-col :md='12' :sm='24' v-if='statusCotrall'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='操作'>
              <a-select :disabled='true' v-decorator="['payType']" placeholder='状态操作'>
                <a-select-option value='4'>
                  冻结
                </a-select-option>
                <a-select-option value='5'>
                  解冻
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
            <a-form-item label='金额' suffix='元' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input placeholder='请输入金额' type='number'
                       v-decorator="['adjustmentAmount', validatorRules.terminalName]" />
            </a-form-item>
          </a-col>
          <a-col :md='20' :sm='24'>
            <a-form-item
              :labelCol='labelCol1'
              :wrapperCol='wrapperCol1'

              label='备注'>
              <a-textarea style='min-height: 180px' placeholder='请输入备注' v-decorator="['remarks', {}]"
                          :disabled='disableSubmit' />
            </a-form-item>
          </a-col>
          <!--          附件-->
          <a-col :md='20' :sm='24'>
            <a-form-item
              :labelCol='{
                xs: { span: 24 },
                sm: { span: 3 },
              }'
              :wrapperCol='{
                xs: { span: 24 },
                sm: { span: 20 },
              }'
              label='附件'
            >
              <HUpload v-bind='loadDatas' ref='hupload'
                       v-decorator="['url']" @loadOk='handleChange'></HUpload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <proChose ref='prochoose' v-bind='modalProps' @okbro='okbropro'></proChose>
      <!--      <formItemsDraw ref='modalForm' @okpopup='modalFormOk' v-bind='configw'></formItemsDraw>-->
    </a-spin>
  </a-modal>
</template>

<script>
import HUpload from '@/components/cn-components/Hupload'
import pick from 'lodash.pick'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import JSelectUserByDep from '@/components/cn-select-popup/JSelectUserByDep'
import JSelectTerminal from '@/components/cn-select-popup/JSelectTerminal'
import proChose from '@comp/cn-components/ProChose'
import { getAction, postAction, deleteAction } from '@/api/manage'

export default {
  name: 'repTankModal',
  components: {
    AFormItem,
    JTreeSelect,
    JSelectUserByDep,
    JSelectTerminal,
    proChose,
    HUpload
  },
  data() {
    return {
      statusCotrall: false,
      buttonTypes: false,
      buttonType: false,
      actionUrl: window._CONFIG['domianUploadURL'] + '/cnUploadController/uploadLocal',
      custList: [],
      name: '',
      custCode: '',
      custName: '',
      disableSubmit: false,
      terminalName: '',
      terminalCode: '',
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: {
          span: 24
        }
        ,
        sm: {
          span: 5
        }
      }
      ,
      wrapperCol: {
        xs: {
          span: 24
        }
        ,
        sm: {
          span: 19
        }
      }
      ,
      labelCol1: {
        xs: {
          span: 24
        }
        ,
        sm: {
          span: 3
        }
      }
      ,
      wrapperCol1: {
        xs: {
          span: 24
        }
        ,
        sm: {
          span: 21
        }
      }
      ,
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        warehouseCode: {
          rules: [{
            required: true, message: '请输入仓库编码!', trigger: 'submit'
          }]
        }
        ,
        warehouseName: {
          rules: [{
            required: true, message: '请输入仓库名称!', trigger: 'submit'
          }]
        }
        ,
        feeManageType:{
          rules: [{
            required: true, message: '请选择费用池类型!', trigger: 'submit'
          }]
        },
        warehouseType: {
          rules: [{
            required: true, message: '请选择类型!', trigger: 'submit'
          }]
        }
        ,
        status: {
          rules: [{
            required: true, message: '请选择状态!', trigger: 'submit'
          }]
        }
      }
      ,
      url: {
        add: window._CONFIG['domianURL'] + '/fee/cnFeePool/accountOrAdjustment',
        check: window._CONFIG['domianTpmURL'] + 'report/tpmActExecuteReport/examineReport',
        status: window._CONFIG['domianURL'] + '/fee/cnFeePool/startOrStop'

      },
      treeData: [],
      columns: [
        {
          title: '商品层级编码',
          dataIndex: 'productName',
          align: 'center'
        },
        {
          title: '商品层级名称',
          dataIndex: 'productName',
          align: 'center'
        },
        {
          title: '商品编码',
          dataIndex: 'productName',
          align: 'center'
        },
        {
          title: '商品名称',
          dataIndex: 'productName',
          align: 'center'
        },
        {
          title: '数量',
          dataIndex: 'productName',
          align: 'center'
        },
        {
          title: '说明',
          dataIndex: 'productName',
          align: 'center'
        }
      ],
      dataSource: [],
      wordList: []
    }
  },
  watch: {
    form: {
      handler(val) {
        console.log(val)
      }
    }
  },
  methods: {
    orgCodeCh(e, key) {
      console.log(e, key)
      this.form.setFieldsValue({
        actOrgCode: e,
        actOrgName: key
      })
    },
    custSearch(status) {
      if (status == 'custName') {
        this.$refs.prochoose.rowKey = 'id'
        let formconfig = [
          {
            key: 'custCode',
            label: '客户编码'
          },
          {
            key: 'custName',
            label: '客户名称'
          }
        ]
        let tableconfig = {
          columns: [
            {
              title: '客户编码',
              align: 'center',
              dataIndex: 'custCode',
              width: 120,
              ellipsis: true
            },
            {
              title: '客户名称',
              align: 'center',
              dataIndex: 'custName',
              width: 120,
              ellipsis: true
            }
          ],
          list: window._CONFIG['domianURL'] + '/customerController/getPageList',
          multiple: false,
          columW: 11
        }
        let dataSource = []
        if (this.form.getFieldValue('custCode')) {
          dataSource = [{
            custCode: this.form.getFieldValue('custCode'),
            custName: this.form.getFieldValue('custName')
          }]
        }
        this.name = '客户'
        this.$refs.prochoose.edit(formconfig, tableconfig, status, 'status2', dataSource)
      }
      if (status == 'products') {
        let typeCode= this.form.getFieldValue('productHierarchyCode')
        console.log(typeCode)
        if(!typeCode){
          this.$message.warning('请先选择商品层级')
          return
        }
        this.$refs.prochoose.rowKey = 'id'
        let formconfig = [
          {
            key: 'goodsCode',
            label: '商品编码'
          },
          {
            key: 'goodsName',
            label: '商品名称'
          }
        ]
        let tableconfig = {
          columns: [
            {
              title: '商品编码',
              align: 'center',
              dataIndex: 'goodsCode',
              width: 120,
              ellipsis: true
            },
            {
              title: '商品名称',
              align: 'center',
              dataIndex: 'goodsName',
              width: 120,
              ellipsis: true
            }
          ],

          list: window._CONFIG['domianURL'] + '/goods/cnGoods/findPageList',
          multiple: false,
          columW: 12
        }
        let dataSource = []
        if (this.form.getFieldValue('productCode')) {
          dataSource = [{
            custCode: this.form.getFieldValue('productCode'),
            custName: this.form.getFieldValue('productName')
          }]
        }
        this.name = '商品'
        this.$refs.prochoose.isorter={typeCode}
        this.$refs.prochoose.edit(formconfig, tableconfig, status, 'status2', dataSource)
      }

    },
    changeJselect(name, value) {
      console.log(name, value)
      this.form.setFieldsValue({
        productHierarchyName: value,
        productHierarchyCode: name
      })
    },
    personChange(e) {
      console.log(e)
    },

    modalFormOk(e1, e2) {
      console.log(e1, e2)
    },
    // params:code:编码，count位数
    dealCode(code, count) {
      console.log(code)
      let num = code.split('')
      let codes = []
      for (let i = 0; i < count; i++) {
        codes.push(num[i])
      }
      return codes
    },
    add() {
      this.edit({})
    },
    handleChange(e) {
      console.log(e)
      if (e == 0) {
        this.wordList = []

      } else {
        let arr = []
        arr = e.map(item => {
          let obj = {
            enclosure: item.url,
            enclosureName: item.name
          }
          return obj
        })
        console.log(arr)
        this.wordList = arr
      }
      // enclosure
    },
    edit(record, statusWay) {
      console.log(record, statusWay)
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.model.adjustmentAmount=this.model.adjustmentAmount||this.model.accountFee
      this.model.actOrgCode=this.model.actOrgCode||this.model.orgCode
      this.visible = true
      this.buttonType = true
      this.buttonTypes = false
      this.statusCotrall = false
      if (!record.id) {
        this.$refs.productLevelCode.treeValue = null
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, Object.keys(this.model)))
        // if (statusWay) {
          // this.form.setFieldsValue({ status: statusWay })
          // this.model.ids = record.id
        // }
        this.form.setFieldsValue({ url: [] })
      })
    },
    close() {
      this.visible = false
    },
    okbropro(record, status, status2, status3) {
      console.log(record, status, status2, status3)
      if (status == 'custName') {
        this.form.setFieldsValue({
          custCode: record[0].custCode,
          custName: record[0].custName,
          actOrgCode:record[0].orgCode,
          actOrgName:record[0].orgName,
        })
      } else if (status == 'products') {
        this.form.setFieldsValue({
          productCode: record[0].goodsCode,
          productName: record[0].goodsName
        })
      }
    },
    handleOk1() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let formData = Object.assign({}, this.model, values)
          formData.extendVos = this.formItems
          formData.detailImgVos = this.wordList
          getAction(this.url.status, formData).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        }
      })
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          // if (values.imgs && values.imgs.length) {
          //   values.imgs.slice(0).map((url, index) => {
          //     extendVos.push({
          //       dataType: 1,
          //       code: url,
          //       orderNum: index
          //     })
          //   })
          // }
          that.confirmLoading = true
          let formData = Object.assign({}, this.model, values)
          formData.extendVos = this.formItems
          formData.detailImgVos = this.wordList
          postAction(this.url.add, formData).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        }
      })
    },
    handleCancel() {
      this.close()
    }
  },
  computed: {
    modalProps() {
      return Object.assign({}, {
        name: this.name
      })
    },
    loadDatas() {
      return {
        actionUrl: this.actionUrl,
        text: '上传附件'
      }
    }
  }
}
</script>

<style lang='less' scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

.basicNew {
  padding: 8px 6px 8px 8px;
  margin-bottom: 16px;

  font-size: 16px;
  font-weight: 700;
}

.title-text {
  width: 100%;
  border: none;
  border-top: 1px solid rgb(192, 196, 204);

}

.bottom-box {
  padding: 8px;

  .first-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .second-line {
    padding: 4px 0 8px 16px;
    min-height: 300px;
    width: 100%;
    background-color: #ececec;
    border-radius: 10px;
  }
}

.second-table {
  background-color: #f0f2f5;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
</style>